<template>
    <div ref="chartContainer" :id="frequencyId + ''" style="width: 100%; height: 100px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    data() {
        return {
            myChart: null,
            number: null,
            expanded_data: [],
            corresponding_data: [],
            xAxisData: [],
            seriesData: [],
            x_coordinates: [],
            interval: 100, // 间隔长度
            input_data: null,
            option: null,
            chartDom: null,
            myChart: null,
            frequencyId: this.generateUniqueId() + "frequencyId",
        };
    },
    props: {
        inputData: {
            type: Object,
        },
        height: {
            type: String,
            default: '450px',
        },
        width: {
            type: String,
            default: '100%',
        }
    },
    watch: {
        inputData: function (val) {
            // console.log("val")
            // console.log(val)
            // this.expandData();
            if (!val) {
                return
            }
            this.input_data = val
            this.expandData();
            this.initEcharts();
        },
    },
    mounted() {
        if (!this.inputData) {
            return
        }
        this.chartDom = document.getElementById(this.$refs.chartContainer.id);
        this.input_data = this.inputData
        this.expandData();
        this.initEcharts();
        window.addEventListener('resize', () => this.updateDom())
    },
    methods: {
        // 更新dom
        updateDom() {
            this.myChart.resize()
        },
        initEcharts() {
            // // 初始化 ECharts 实例
            if (!this.myChart) this.myChart = echarts.init(document.getElementById(this.$refs.chartContainer.id));

            // 模拟数据
            let data = []
            for (let i = 0; i < this.seriesData.length; i++) {
                const a = [i, 0, this.seriesData[i]]
                data.push(a);
            }
            // console.log("模拟数据");
            // console.log(data);
            // 设置图表配置项
            this.option = {
                /** 配置图标离容器上下左右的距离 */
                grid: { top: "15%", right: "10%", left: "10%", bottom: "15%", },
                tooltip: {
                    show: false, position: 'top',
                    // formatter: function (params) {
                    //     return 'Value: ' + params.value[2];
                    // }
                },
                visualMap: {
                    min: -140, max: 50,
                    show: false, orient: 'horizontal', left: 'center', bottom: '15%',
                    inRange: { // 指定颜色范围
                        color: ['#0B5184', '#0B5386', '#0C5587', '#0C5788', '#0D598A', '#0E5B8C', '#0E5D8D', '#0F5F8F', '#0F6190', '#106291', '#116593', '#116694', '#116895', '#126A96', '#136C99', '#146E9A', '#14709B', '#15729D', '#16749E', '#15759F', '#1677A0', '#1679A2', '#187BA4', '#187DA5', '#1A81A8', '#1C86AA', '#1E8AAD', '#208EAF', '#2394B2', '#2699B5', '#289EB8', '#2BA3BA', '#2EA8BE', '#30ADC0', '#32B1C2', '#34B6C5', '#37BBC8', '#39BFCB', '#3BC4CD', '#3ECAD0', '#40CED2', '#43D3D6', '#45D7D8', '#48DDDB', '#4BE2DE', '#4DE6E0', '#4FEBE3', '#52F0E6',]
                    },

                },
                xAxis: {
                    // data: this.xAxisData,
                    // data:[0,30,20],
                    // 设置为 false，隐藏刻度线上的文字
                    type: 'category', axisLabel: { show: false }, splitArea: { show: true },
                },
                yAxis: {
                    // data: [''],
                    type: 'category', splitArea: { show: true }, inverse: true, // 让热力图铺满整个容器
                },
                series: [{
                    name: 'Heatmap', type: 'heatmap', label: { show: false },
                    emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } },
                    data: data,
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            this.myChart.setOption(this.option);
        },
        generateUniqueId() {
            const timestamp = new Date().getTime().toString(16); // 时间戳的16进制表示
            const randomPart = Math.random().toString(16).substring(2); // 随机数的16进制表示，去掉0.
            const uniqueId = timestamp + randomPart;
            return uniqueId;
        },
        divideArray() {
            let arr = [this.input_data.central]
            const num = this.input_data.need_points / 2
            const numMath = Math.floor(num)
            // console.log("中心点：" + numMath);
            for (let i = 1; i <= numMath; i++) {
                //  arr.push(this.inputData.central + (i * 100));
                arr.push(this.input_data.central + i * 1);
                arr.unshift(this.input_data.central - i * 1)
            }
            this.xAxisData = arr
        },
        expandData() {
            // 将输入字符串转换为数组
            //  if(!this.input_data.data){
            //     return
            // }
            const dataArray = this.input_data.data.split(",").map(Number);
            // 使用线性插值将数据从原始点数扩展到所需点数
            // const expandedData = this.interpolateData(dataArray, this.input_data.need_points);
            // 更新扩展后的数据
            this.seriesData = dataArray
            // 计算每个值对应的数据
            this.divideArray()

        },
        interpolateData(dataArray, needPoints) {
            const originalPoints = dataArray.length;
            // 使用线性插值将数据从原始点数扩展到所需点数
            const expandedData = [];
            for (let i = 0; i < needPoints; i++) {
                const index = (i / (needPoints - 1)) * (originalPoints - 1);
                const lowerIndex = Math.floor(index);
                const upperIndex = Math.ceil(index);
                const t = index - lowerIndex;

                const interpolatedValue =
                    dataArray[lowerIndex] + t * (dataArray[upperIndex] - dataArray[lowerIndex]);
                expandedData.push(Math.round(interpolatedValue));
            }

            return expandedData;
        },

        calculateCorrespondingData(expandedData) {
            const centralIndex = this.input_data.central;
            const correspondingData = [];

            for (let i = 0; i < expandedData.length; i++) {
                const dataIndex = centralIndex + (i - expandedData.length / 2);
                correspondingData.push({ value: expandedData[i], dataIndex });
            }

            return correspondingData;
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', () => this.updateDom())
    },

};
</script>

<style>
/* 可以根据需要添加样式 */
</style>